<template>
    <div class="container-achievementTop">
        <div class="page-panel">
            <div class="panel-content detail-top">
                <div class="top-content">
                    <div class="top-left">
                        <img class="top-left-img" :src="detailInfo.coverPicture" />
                    </div>
                    <div class="top-right">
                        <div class="t-r-title">{{detailInfo.achievementName}}</div>
                        <div class="t-r-list">
                            <span class="t-r-l-title">成果负责人：</span>
                            <span class="t-r-l-info">{{detailInfo.achievementPrincipal}}</span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-l-title">成果类别：</span>
                            <span class="t-r-l-info">{{detailInfo.achievementCategory}}</span>
                        </div>
                        <div class="t-r-list" v-if="detailInfo.achievementYear">
                            <span class="t-r-l-title">成果年份：</span>
                            <span class="t-r-l-info">{{detailInfo.achievementYear}}</span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-l-title">所属技术类别：</span>
                            <span class="t-r-l-info">
                                {{detailInfo.belongToTechnologyCategory && detailInfo.belongToTechnologyCategory.join(",")}}
                            </span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-list-half">
                                <span class="t-r-l-title">联系人：</span>
                                <span class="t-r-l-info">{{detailInfo.contacts}}</span>
                            </span>
                            <!-- <span class="t-r-list-half">
                                <span class="t-r-l-title">联系方式：</span>
                                <span class="t-r-l-info">{{detailInfo.contactWay}}</span>
                            </span> -->
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-list-half" v-if="detailInfo.taskSource">
                                <span class="t-r-l-title">课题来源：</span>
                                <span class="t-r-l-info">{{detailInfo.taskSource}}</span>
                            </span>
                            <span class="t-r-list-half" v-if="detailInfo.useState">
                                <span class="t-r-l-title">应用状态：</span>
                                <span class="t-r-l-info">{{detailInfo.useState}}</span>
                            </span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-list-half">
                                <span class="t-r-l-title">研究形式：</span>
                                <span class="t-r-l-info">{{detailInfo.studyForm}}</span>
                            </span>
                            <span class="t-r-list-half">
                                <span class="t-r-l-title">技术成熟度：</span>
                                <span class="t-r-l-info">{{detailInfo.skillRipe}}</span>
                            </span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-l-title">推广形式：</span>
                            <span class="t-r-l-info">
                                {{detailInfo.promotionForm && detailInfo.promotionForm.join(",")}}
                            </span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-l-title">成果体现形式：</span>
                            <span class="t-r-l-info">
                                {{detailInfo.embodyForm && detailInfo.embodyForm.join(",")}}
                            </span>
                        </div>
                        <div class="t-r-list">
                            <span class="t-r-l-title">应用行业：</span>
                            <span class="t-r-l-info">
                                {{detailInfo.applicationIndustry && detailInfo.applicationIndustry.join(",")}}
                            </span>
                        </div>

                        <div class="t-r-user">

                            <img class="t-r-user-img" :src="detailInfo.issuerHeadPortrait" />
                            <span class="t-r-user-words">发布人：{{detailInfo.issuer}}</span>

                        </div>
                        <div class="t-r-user" v-for="item in detailInfo.brokerRelevances">
                            <img class="t-r-user-img" :src="item.technicalHeadPortrait" />
                            <span class="t-r-user-words">技术经理人：{{item.technicalRepresentative}}</span>
                            <span class="auth-type">已认证</span>
                        </div>
                        <div class="t-r-addr" v-if="detailInfo.location">
                            <i class="iconfont">&#xe636;</i>
                            <span
                                class="t-r-addr-words">{{detailInfo.location.province + detailInfo.location.city + detailInfo.location.district}}</span>
                        </div>
                    </div>
                </div>
                <div class="top-btn-box" v-if="showBtn">
                    <a-button class="top-btn" type="primary" @click="jumpDeliver">我要对接</a-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: "" }) showBtn!: boolean;
    @Prop({ default: {} }) detailInfo!: object;
    jumpDeliver() {
        this.$router.push({ name: "achievementDeliver" });
    }
}
</script>

<style lang="scss">
.container-achievementTop {
    .detail-top {
        background-color: #fff;
        border-radius: 8px;
    }

    .top-content {
        display: flex;
        align-items: center;
        width: 100%;
        height: fit-content;
    }
    .top-left {
        width: 50%;
        flex-shrink: 0;
        text-align: center;
        height: 478px;
        padding-right: 20px 20px 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .top-right {
        width: 50%;
        flex-shrink: 0;
        padding: 0 0 0 20px;
    }
    .top-left-img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 4px;
    }
    .t-r-user-img {
        width: 42px;
        height: 42px;
        border-radius: 42px;
        background-color: #eee;
        border: solid 1px #eee;
        margin-right: 8px;
    }
    .t-r-title {
        font-weight: 500;
        font-size: 24px;
        color: #102040;
        border-bottom: solid 1px #d0d0d0;
        padding: 10px 0;
    }
    .yugu-danger {
        display: inline-flex;
        height: 35px;
        align-items: center;
        font-size: 14px;
        color: #e94637;
        background: rgba(233, 70, 55, 0.1);
        border-radius: 4px;
        padding: 0 10px;
    }
    .yugu-primary {
        display: inline-flex;
        height: 35px;
        align-items: center;
        font-size: 14px;
        color: #2f65f3;
        background: rgba(47, 101, 243, 0.1);
        border-radius: 4px;
        padding: 0 10px;
        margin-left: 15px;
    }
    .t-r-list {
        margin-top: 10px;
        font-size: 16px;
    }
    .t-r-list-half {
        display: inline-block;
        width: 50%;
    }
    .t-r-l-title {
        color: #82848a;
    }
    .t-r-l-info {
        color: #333;
    }
    .t-r-user {
        margin-top: 10px;
    }
    .t-r-user-half {
        // display: inline-block;
        // width: 50%;
        margin-bottom: 5px;
    }
    .t-r-user-words {
        font-size: 14px;
        color: #333;
    }
    .auth-type {
        font-size: 12px;
        color: #fff;
        background-color: #ffd706;
        padding: 2px 8px;
        border-radius: 30px;
        margin-left: 10px;
    }

    .t-r-addr {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 14px;
        margin-top: 10px;
    }
    .t-r-addr-words {
        margin-left: 4px;
    }
    .top-btn-box {
        padding: 20px 0;
        text-align: right;
        border-top: solid 1px #d0d0d0;
    }
    .top-btn {
        font-size: 16px;
        height: 40px;
        width: 120px;
    }
}
</style>
